<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div
        class="table-page-search-wrapper"
        v-if="true"
      >
        <a-form layout="inline">
          <a-row :gutter="20">
            <a-col
              :md="8"
              :sm="24"
            >
              <a-form-item label="订单时间">
                <a-range-picker
                  :format="'YYYY-MM-DD'"
                  :valueFormat="'YYYY-MM-DD'"
                  v-model="queryParam.datetime"
                />
              </a-form-item>
            </a-col>
            <a-col
              :md="8"
              :sm="24"
            >
              <a-form-item label="订单平台">
                <a-select
                  placeholder="请选择订单平台"
                  v-model="queryParam.platform"
                >
                  <a-select-option value="-1">全部</a-select-option>
                  <a-select-option value="1">支付宝</a-select-option>
                  <a-select-option value="0">微信</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col
              :md="8"
              :sm="24"
            >
              <span class="table-page-search-submitButtons">
                <a-button
                  type="primary"
                  @click="$refs.table.refresh(true)"
                >查询</a-button>
                <a-button
                  style="margin-left: 8px"
                  @click="resetQueryParams"
                >重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <a-row :span="24" size="large" justify="center" style="padding-bottom: 20px;">
        <a-col :span="11">
          <a-card title="总成交" justify="start">
            <a-row>
              <a-col :span="6" style="text-align: center;">
                <p>{{ all.order_num }}</p>
                <p>付款订单数/个</p>
              </a-col>
              <a-col :span="6" style="text-align: center;">
                <p>{{ all.goods_num }}</p>
                <p>付款件数/件</p>
              </a-col>
              <a-col :span="6" style="text-align: center;">
                <p>{{ all.user_num }}</p>
                <p>付款人数/人</p>
              </a-col>
              <a-col :span="6" style="text-align: center;">
                <p>{{ all.pay_price }}</p>
                <p>付款金额/元</p>
              </a-col>
            </a-row>
          </a-card>
        </a-col>
        <a-col :span="11" :offset="2">
          <a-card title="今日实时成交" justify="start">
            <a-row>
              <a-col :span="6" style="text-align: center;">
                <p>{{ now.order_num }}</p>
                <p>付款订单数/个</p>
              </a-col>
              <a-col :span="6" style="text-align: center;">
                <p>{{ now.goods_num }}</p>
                <p>付款件数/件</p>
              </a-col>
              <a-col :span="6" style="text-align: center;">
                <p>{{ now.user_num }}</p>
                <p>付款人数/人</p>
              </a-col>
              <a-col :span="6" style="text-align: center;">
                <p>{{ now.pay_price }}</p>
                <p>付款金额/元</p>
              </a-col>
            </a-row>
          </a-card>
        </a-col>
      </a-row>
      <s-table
        rowKey="key"
        size="default"
        :columns="columns"
        :data="loadData"
        ref="table"
      >
      </s-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import {
  STable
} from '@/components'
import {
  sale
} from '@/api/statistic/data'
const columns = [
  {
    title: '日期',
    dataIndex: 'time'
  },
  {
    title: '付款人数',
    dataIndex: 'user_num'
  },
  {
    title: '付款订单数',
    dataIndex: 'order_num'
  },
  {
    title: '付款金额',
    dataIndex: 'pay_price'
  },
  {
    title: '付款件数',
    dataIndex: 'goods_num'
  }
]

export default {
  name: 'SaleData',
  components: {
    STable
  },
  data () {
    return {
      labelCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 5
        }
      },
      wrapperCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 16
        }
      },
      all: {
        order_num: 0,
        goods_num: 0,
        user_num: 0,
        pay_price: 0
      },
      now: {
        order_num: 0,
        goods_num: 0,
        user_num: 0,
        pay_price: 0
      },
      // 表头
      columns,
      modalLoading: false,
      // 查询条件参数
      queryParam: {
        datetime: [],
        platform: '-1'
      },
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        Object.assign(parameter, this.queryParam)
        return sale(parameter)
          .then(res => {
            console.log('sale', res)
            for (var jjs in res.data.data) {
              res.data.data[jjs].key = jjs
            }
            this.all = res.all
            this.now = res.now
            return res.data
          }).catch(err => {
            this.$message.error(err.message)
            this.$refs.table.localLoading = false
          })
      }
    }
  },
  filters: {
  },
  created () {
  },
  methods: {
    resetQueryParams () {
      Object.assign(this.queryParam, {
        datetime: [],
        platform: '-1'
      })
      this.$refs.table.refresh(true)
    }
  }
}
</script>

<style lang="less" scoped>
.permission-form {
  /deep/ .permission-group {
    margin-top: 0;
    margin-bottom: 0;
  }
}
</style>
